<template>
	<!--wxml-->
	<view class="guide" v-if="showGuide">
	  <view :style="guideStyle" class="guide-box">
	    <view class="tips guide-step-tips" :style="tipPosition">
	      <view class="text text-xxl">{{ guideList[index].tips }}</view>
	      <view class="tool-btn">
	        <!-- <text @tap="skip">跳过</text> -->
			<view v-if="index != 0" class="next" style="" @tap="upTap">上一步</view>
			<view v-else></view>
	        <view class="next" style="" @tap="next">{{(index==guideList.length-1)?'关闭':'下一步'}}</view>
	      </view>
	    </view>
	    <view class="arrow" :style="arrowTop"></view>
	  </view>
	  <!-- 遮罩层，防止点击 -->
	  <view class="v-model"></view>
	</view>

</template>

<script>
	export default {
		name:"yw-operate-zhiyin",
		data() {
			return {
				stepName: "step", //该提示步骤的名称，用于不在重复展示
				guideList: [],
				index: 0, // 当前展示的索引
				showGuide: false, // 是否显示引导
				guideStyle: "", // 默认样式
				arrowTop: "", //步骤提示三角形的定位
				tipPosition: "", //步骤提示的定位
				systemInfo: "", //屏幕宽度高度等信息
				tipWidth: 200, //步骤提示默认的宽度
			};
		},
		methods:{
			// 展示新手提示
			    viewTips(data, scrollTop) {
			      console.log(data, scrollTop);
			      if (data) {
					  let systemInfo = this.systemInfo
					  let tipWidth = this.tipWidth
					  let index = this.index
					  let guideList = this.guideList
					  let arrowTop = this.arrowTop
					  let tipPosition = this.tipPosition
					  let guideStyle = this.guideStyle
			          console.log(systemInfo);
			        // 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
			        let newWidth = systemInfo.windowWidth - 20;
			        if (data.width >= newWidth) {
			          data.width = newWidth;
			        }
			        // 如果距离左边为0,自动增加一点左边距
			        if (data.left == 0) {
			          data.left = 10;
			        }
			        let domRW = systemInfo.windowWidth - data.left;
			        let left = 0;
			        // 如果dom距离右边没有tips的宽度大的话,就要让tips向左便宜
			        if (domRW < tipWidth) {
			          left = domRW - tipWidth - 30;
			        }
			        // const index = index;
			        // 步骤条展示的高度需要加上屏幕滚动的高度
			        data.top += scrollTop;
			        // 根据实际情况需要滚动到展示区域
					setTimeout(()=>{
						wx.pageScrollTo({
						  scrollTop: data.top > 20 ? data.top - 20 : 0,
						  duration: 100,
						});
					},500)
			        
			        let obj = Object.assign(guideList[index], data);
			        // 设置三角形高度
			        let arrArrowTop = data.height + 9;
			        arrowTop = "top:" + arrArrowTop + "px;";
			        // 设置提示框定位
			        tipPosition = "top:" + (arrArrowTop + 5) + "px;left:" + left + "px;";
			        // 重新设置guideList的值
			        guideList.splice(index, 1, obj);
			        guideStyle = this.getStyle();
			        console.log(arrowTop, tipPosition, guideList, guideStyle);
					this.arrowTop = arrowTop
					this.tipPosition = tipPosition
					this.guideList = guideList
					this.guideStyle = guideStyle
			      } else {
			        this.index = this.index + 1
			        this.getDomInfo();
			      }
			    },
			    // 获取步骤提示的主要样式
			    getStyle() {
					let guideList = this.guideList
					let index = this.index
			      const { width, height, left, top, style } = guideList[index];
			      let newstyle = "width:" + width + "px;";
			      newstyle += "height:" + height + "px;";
			      newstyle += "left:" + left + "px;";
			      newstyle += "top:" + top + "px;";
			      newstyle +=
			        "box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;";
			      newstyle += style;
			      return newstyle;
			    },
			    // 获取dom信息
			    getDomInfo() {
			      let guideList = this.guideList
			      let index = this.index
			      console.log(guideList, index);
			      let el = guideList[index].el;
			         console.log(el);
			    //   const query = wx.createSelectorQuery().in(this.$root);
			      const query = wx.createSelectorQuery();
			    //   console.log(query);
			      setTimeout(() => {
			        query.select(el).boundingClientRect();
			        query.selectViewport().scrollOffset();
			        query.exec( (res)=> {
			          console.log("打印demo的元素的信息", res);
			          let data = res[0]; // #the-id节点的上边界坐标
			          let scrollTop = res[1].scrollTop; // 显示区域的竖直滚动位置
			          this.viewTips(data, scrollTop);
			        });
			      }, 10);
			    },
			    skip() {
				  this.showGuide = false
			      wx.setStorageSync(this.data.stepName, "true");
			    },
			    // 下一步
			    next() {
				  let guideList = this.guideList
				  let index = this.index
				  let stepName = this.stepName
				  
			      if (index === guideList.length - 1) {
			        this.showGuide = false,
			        wx.setStorageSync(stepName, "true");
			      } else {
			        this.index = this.index + 1
					this.getDomInfo();
			      }
			    },
			    // 上一步
			    upTap() {
				  if(this.index > 0){
					  this.index = this.index - 1
					  this.getDomInfo();
				  }
			    },
				open(step){
						console.log("打开提示",step);
					  this.guideList = step.guideList;
					  this.stepName = step.name;
					  this.systemInfo = wx.getSystemInfoSync()
					  
					  const guide = wx.getStorageSync(step.name);
					  if (!guide) {
						  this.showGuide = true;
					    this.getDomInfo();
					  } else {
					     this.showGuide = false;
					}
				}
			  },
	}
</script>

<style>
	/* wxss */
	.v-model {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1000;
	}
	.guide {
	    z-index: 1001;
	}
	.guide-box {
	    position: absolute;
	    z-index: 10001;
	    transition: all 0.2s;
	    
	}
	.guide-box::before {
	    content: '';
	    height: 100%;
	    width: 100%;
	    border: 1px dashed #fff;
	    border-radius: 8rpx;
	    position: absolute;
	    top: -8rpx;
	    left: -8rpx;
	    padding: 7rpx;
	}
	.arrow {
	    height: 20rpx;
	    width: 20rpx;
	    background: #1cbbb4;
	    position: absolute;
	    top: 144rpx;
	    left: 45%;
	    transform: rotate(45deg);
	}
	.tips {
		width: 400rpx;
	    background: linear-gradient(180deg, #1cbbb4, #0081ff);
	    box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
	    color: #fff;
	    position: absolute;
	    top: 152rpx;
	    left: -50%;
	    padding: 15rpx 20rpx;
	    font-size: 28rpx;
	    border-radius: 12rpx;
	}
	 .tool-btn {
	     display: flex;
	     justify-content: space-between;
	     align-items: center;
	     padding-right: 0rpx;
	     margin-top: 20rpx;
	 }
	 .next {
	     background: #fff;
	     height: auto;
	     width: 130rpx;
	     text-align: center;
	     border-radius: 8rpx;
	     color: #666;
	     line-height: 48rpx;
	     font-size: 34rpx
	 }

</style>
